<template>
  <section class="homepage-left-category">
    <div class="section-header">
      热门头条
    </div>
    <div class="content-wrap">
      <div class="article-list">
        <div v-for="(item,index) in articles" :key="index" class="article" @click="goToView(index)">
          <img class="article-image" :src="item.image">
          <div class="article-title">
            {{item.title}}
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import HomepageAPI from '@/api/homepage/homepage';
export default {
    data() {
        return {
            articles: [
            ]
        };
    },
    mounted() {
        this.getArticles();
    },
    methods: {
        getArticles() {
            HomepageAPI.getNews({ size: 7 })
                .then(res => {
                    this.articles = res.obj;
                });
        },
        goToView(index) {
            this.$router.push('/f/article/' + this.articles[index].id);
        }
    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-left-category {
    width:210px;
    height:460px;
    border: 1px solid $bg-color;
    background-color: white;
    .section-header {
      padding-left:10px;
      height:30px;
      line-height: 30px;
      color: white;
      background: $main-color;
    }
    .content-wrap {
      padding:10px;
      .article-list {
        .article {
          height:60px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid $bg-color;
          flex: 0;
          cursor: pointer;
          .article-image {
            width:80px;
            height:40px;
            flex-shrink: 0;
          }
          .article-title {
            margin-left:5px;
            height:40px;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }



</style>
